<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 679px;
            margin: auto;
            overflow: hidden; /*溢出：隐藏*/

        }

        ul {
            list-style: none; /*去掉前面的点*/
        }

        .box ul li {
            width: 240px;
            height: 679px;
            float: left;
        }
    </style>

    <script>

        $(function () {
            var colors = ["green", "blue", "pink", "yellow", "red"];
            $.fn.accordion =function(colors,width) {
                colors =colors || [];
                width = width || 60.5;
                var $li = this.find("li");//找到当前元素下的li  ， find() 方法返回被选元素的后代元素。
                var boxwidth = this.width();//当前DIV的宽度
                var $max = boxwidth - ($li.length - 1) * width;//最大宽度
                var $avg = boxwidth / $li.length;//平均宽度

                //  index - 选择器的 index 位置
                //  element - 当前的元素（也可使用 "this" 选择器）
                $li.each(function (index,element) {
                    $(element).css("backgroundColor",colors[index])
                });

                $li.mouseenter(function () {
                    $(this).siblings("li").stop().animate({width: width});
                    $(this).stop().animate({width:$max});
                }).mouseleave(function () {
                    $li.stop().animate({width:$avg});
                });
            };
        });

    </script>
</head>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>


</body>
</html>